<template>
    <!-- <div class="login_bigbox">
      <h2>强盛集团<br>后台注册系统</h2>
          <div class="login_box">
              <h1>注册系统
              
              </h1>
              <div class="login_box1">
                  <label for=""></label>
                  <input type="text" v-model="userId" placeholder="输入注册的账号" name="" id="">
              </div>
              <div class="login_box2">
                  <label for=""></label>
                  <input type="password" v-model="userPs" placeholder="输入注册的密码" name="" id="">
              </div>
              
              <div class="login_bt1">
                  <button  @click="zhuce()">注册</button> 
              </div>
          </div>
     
    </div> -->
    <div class="login_bigbox">
        <h2>强盛集团<br>后台注册系统</h2>
        <div class="login_box">
            <h1>
                用户注册
                
            </h1>
    <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item  label="账号" prop="userId">

    <el-input class="zhanghao"  type="text" v-model="ruleForm.userId" placeholder="请输入账号" prefix-icon="el-icon-user-solid"
    autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item  label="密码" prop="userPs">
        <el-input class="mima" type="password" v-model="ruleForm.userPs" placeholder="请输入密码" prefix-icon="el-icon-lock" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item  label="确认密码" prop="checkPass">
        <el-input class="mima" type="password" v-model="ruleForm.checkPass" placeholder="请输入密码" prefix-icon="el-icon-lock" autocomplete="off"></el-input>
    </el-form-item>
    
    <el-form-item>
        <el-button  type="primary" class="zhuceo" style="background-color: #505458;border: none;"
         @click="submitForm(ruleForm)">注册</el-button>

        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button  @click="tologin()">去登陆</el-button> 
    </el-form-item>
</el-form>
        </div>
    </div>
  </template>
  <script>
  export default {
    name: "Register",
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.userPs) {

          this.$message.error('账号或者密码输入错误');
          callback(new Error('两次输入密码不一致!'));
        } else {
          

          callback();
        }
      };
      return {
        ruleForm: {
          userPs: '',
          userId: '',

          userarr:[],
          checkPass: '',
          newArr:''
          

        },
        rules: {
          userId: [
            { vrequired: true, message:'请输入你的用户名',trigger: 'blur' },

            { min:2,max:8, message:'请输入2-9个字符',trigger: 'blur' }

          ],
          userPs: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          
        }
      };
    },
    methods: {
      submitForm(ruleForm) {

        // 判断输入的为不为空
        
        if(!this.ruleForm.userId && !this.ruleForm.userPs) return   this.$message.error('账号或者密码输入错误');
        // 进行判断
        if(!localStorage.getItem('ruleForm.userId') || !localStorage.getItem('ruleForm.userPs')){
          // 没有
         
          localStorage.setItem('ruleForm.userId','[]')
          localStorage.setItem('ruleForm.userPs','[]')
        }else{
          // 之前有
          this.userarr = JSON.parse(localStorage.getItem('ruleForm.userId') )
          this.userarr = JSON.parse(localStorage.getItem('ruleForm.userPs') )
        }
        // 增加数据 
        this.userarr.unshift(this.ruleForm.userId);
        this.userarr.unshift(this.ruleForm.userPs);
        // 
        let newArr = new Set(this.userarr)
        // 
        localStorage.setItem('ruleForm.userId',JSON.stringify(Array.from(newArr)))
        localStorage.setItem('ruleForm.userPs',JSON.stringify(Array.from(newArr)))




        // console.log(this.ruleForm.userId);
        
      //   this.axios.post('',this.ruleForm).then((resp)=>{
      //   let data = resp.data;
      //   if(data.success){
      //       this.ruleForm= {};
      //       this.$message({
      //       message: '恭喜你注册成功，点击去登陆',
      //       type: 'success'
      //       });
            
      //   }
      // })

      this.ruleForm= {};
        this.$message({
        message: '恭喜你注册成功，点击去登陆',
        type: 'success'
        });
      },
      
    
      

      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      tologin(){
        this.$router.push({
            path:'/'
        })

      }

    }
    // data() {
    //     return {
    //         userId: "",
    //         userPs: "",
    //     }
    // },
    // methods: {
    //   go() {
    //     sessionStorage.setItem("userId", this.userId);
    //     sessionStorage.setItem("userPs", this.userPs);
    //     this.$router.push({
    //       name: "list",
    //     });
    //   },
    //   zhuce(){
    //       this.$router.push({
    //           path:'/Register'
    //       })
    //   }
    // },
  };

  </script>
  
  <style scoped>
 /* .login_bigbox h1 {
  color: aliceblue;
  font-size: 50px;
} */
.login_bigbox {
  background: url(../img/R-A.jpg) no-repeat; 
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-size: cover;
}

 .login_box {
  position: absolute;
  top: 0;
  left: 0;
  right: 100px;
  bottom: 0;
  margin:auto;
  width: 450px;
  height: 350px;
  opacity: 0.8;
  border-radius: 5%;
  padding: 35px;
  background-color: rgb(237, 234, 234);
  box-shadow: 0 0 25px #cac6c6;
} 
/* .login_box h1 {
  text-align: center;
  color: rgb(99, 97, 97);
}
*/

.login_box1 {
  text-align: center;
  font-size: 35px;
  color: rgb(99, 97, 97);
}
.demo-ruleForm{
    margin-left: -50px;
}
  /* 
.login_box1 input {
  margin-top: 50px;
  font-size: 25px;
  width: 250px;
  height: 30px;
  background-color: rgb(237, 234, 234);
  border: 2px solid rgb(99, 97, 97);
  border-radius: 10px 10px 10px 10px;
  color: rgb(99, 97, 97);
}
.login_box2 {
  text-align: center;
  font-size: 35px;
  color: rgb(99, 97, 97);
}
.login_box2 input {
  margin-top: 50px;
  font-size: 25px;
  width: 250px;
  height: 30px;
  background-color: rgb(237, 234, 234);
  border: 2px solid rgb(99, 97, 97);
  border-radius: 10px 10px 10px 10px;
  color: rgb(99, 97, 97);
}
.login_bt button {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 250px;
  left: -200px;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 2px solid rgb(99, 97, 97);
  border-radius: 10px;
}
.login_bt1 button{
  width: 100px;
  height: 50px;
  position: absolute;
  top: 250px;
  left: 200px;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 2px solid rgb(99, 97, 97);
  border-radius: 10px;
} */
  /* h2 {
    color: aliceblue;
    font-size: 50px;
    position: absolute;
    top: 30px;
    left: 30px;
  }
  
  .login_bigbox h1 {
    color: aliceblue;
    font-size: 50px;
  }
  .login_bigbox {
    background: url(../img/R-A.jpg) no-repeat; 
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-size: cover;
  }
  
  .login_box {
    position: absolute;
    position: absolute;
    top: 0;
    left: 0px;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 450px;
    height: 350px;
    opacity: 0.8;
    border-radius: 5%;
    padding: 35px;
    background-color: rgb(237, 234, 234);
    box-shadow: 0 0 25px #cac6c6;

  }
  .login_box h1 {
    text-align: center;
    color: rgb(99, 97, 97);
  }
  .login_box1 {
    text-align: center;
    font-size: 35px;
    color: rgb(99, 97, 97);
  }
  .login_box1 input {
    margin-top: 50px;
    font-size: 25px;
    width: 250px;
    height: 30px;
    background-color: rgb(237, 234, 234);
    border: 2px solid rgb(99, 97, 97);
    border-radius: 10px 10px 10px 10px;
    color: rgb(99, 97, 97);
  }
  .login_box2 {
    text-align: center;
    font-size: 35px;
    color: rgb(99, 97, 97);
  }
  .login_box2 input {
    margin-top: 50px;
    font-size: 25px;
    width: 250px;
    height: 30px;
    background-color: rgb(237, 234, 234);
    border: 2px solid rgb(99, 97, 97);
    border-radius: 10px 10px 10px 10px;
    color: rgb(99, 97, 97);
  }
  .login_bt button {
    width: 100px;
    height: 50px;
    position: absolute;
    top: 250px;
    left: -200px;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid rgb(99, 97, 97);
    border-radius: 10px;
  }
  .login_bt1 button{
    width: 100px;
    height: 50px;
    position: absolute;
    top: 250px;
    left: 0px;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid rgb(99, 97, 97);
    border-radius: 10px;
  } */
  </style>